<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/pc-system/iconfont.css">
    <link rel="stylesheet" href="/css/pc-system/common.css">
    <link rel="stylesheet" href="/css/pc-system/login-register.css">
    <title>注册</title>
</head>
<body ontouchstart>
<div class="login-bk">
    <div class="login-title">
        <img src="/img/kpi.png">
        <p>绩效考核系统</p>
    </div>
    <form class="weui-cells login-form" action="" method="post" onsubmit="return false;">
        <h3 class="form-title">用户登录</h3>
        <div class="weui-cell">
            <div class="weui-cell__hd"><i class="icon iconfont icon-user"></i></div>
            <div class="weui-cell__bd">
                <input type="text" name="username" id="username" class="input-text" placeholder="请输入手机号/邮箱" />
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><i class="icon iconfont icon-lock"></i></div>
            <div class="weui-cell__bd">
                <input type="password" name="password" id="password" class="input-text" placeholder="请设置密码" />
            </div>
        </div>
        <div class="weui-cell verify-sec">
            <div class="weui-cell__hd">
                <input type="text" name="verify" id="verify" class="input-text" placeholder="请输入手机验证码" />
            </div>
            <div class="weui-cell__bd">
                <input type="button" value="获取" class="verify_code" />
            </div>
        </div>
        {!! csrf_field() !!}
        <div class="left-center middle-center">
            <input type="checkbox" class="ace" name="rembme" id="rembme"/><span class="lbl">我已阅读</span>
            <a href="javascript:void(0)">《绩效考核系统用户协议》</a>
        </div>
        <button type="submit" class="weui-btn weui-btn_color login-btn"/>注册</button>
        <div class="middle-center"><span>已有账号？</span><a href="/front/login">立即登录</a></div>
    </form>
</div>
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/addons/layer/layer.js"></script>
<script>
    $(document).ready(function () {
        //倒计时
        function setTimer(){
            var time=60;
            var timers=setInterval(function(){
                time--;
                if(time <= 0){
                    time=0;
                    $('.verify_code').attr('disabled',false);
                    $('.verify_code').eq(0)[0].b=false;
                    $('.verify_code').val('获取');
                    clearInterval(timers);
                    $('.verify_code').css('font-size','18px')
                    return false;
                }
                $('.verify_code').attr('disabled','disabled');
                $('.verify_code').css('font-size','16px')
                $('.verify_code').val(time + "秒后重试")
            },1000)
        }

        //正则表达式，十一位数字的电话号码
        var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
        //邮箱验证
        var myreg=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        //点击发送验证码按钮，进行倒计时
        var token = $('input[name=_token]').val();
        $('.verify_code').on('click',function(){
            var username = $("#username").val().trim();
            if(username == ''){
                layer.msg('请输入邮箱或手机号!', {time: 1000});
                return false;
            }
            if(!phoneReg.test(username) && !myreg.test(username)){
                layer.msg('请输入正确的手机号/邮箱!', {time: 1000});
                return false;
            }
            if(!this.b){
                setTimer();
                this.b=true;
            }
            $.ajax({
                'url': '/sendmsg?_token='+token,
                'type': 'POST',
                'data': {'phone':username},
                error: function (request) {
                    layer.msg('网络错误!', {time: 1000});
                },
                success: function (data) {
                    if (data.status == 'success') {
                        layer.msg(data.msg, {time: 1000});
                    } else {
                        layer.msg(data.msg, {time: 1000});
                    }
                },
            });
        })

        $('.login-btn').click(function () {
            $('.login-btn').attr('disabled','disabled');
            setInterval(function(){
                $('.login-btn').attr('disabled',false);
            },3000);
            var username = $("#username").val().trim();
            var password = $("#password").val().trim();
            var verify = $("#verify").val().trim();
            var rembme = $('#rembme').is(":checked");
            if(username == ''){
                layer.msg("请输入用户名!", {time: 1000});
                return false;
            }
            if(!phoneReg.test(username) && !myreg.test(username)){
                layer.msg("请输入正确的手机号/邮箱!", {time: 1000});
                return false;
            }
            if(password == ''){
                layer.msg("密码不能为空!", {time: 1000});
                return false;
            }
            if(verify == ''){
                layer.msg("验证码不能为空!", {time: 1000});
                return false;
            }
            if(rembme == false){
                layer.msg("请勾选用户协议!", {time: 1000});
                return false;
            }
            $.ajax({
                'url': '/front/register?_token='+token,
                'type': 'POST',
                'data': 'username='+username+'&repassword='+password+'&password='+password+'&phone_code='+verify,
                'dataType': "json",
                error: function (request) {
                    layer.msg("网络错误!", {time: 1000});
                },
                success: function (data) {
                    if (data.status == 'success') {
                        layer.msg(data.msg, {time: 1000});
                        window.location.href=data.redirectUrl;
                    } else {
                        layer.msg(data.msg, {time: 1000});
                    }
                },
            });
        })
    })
</script>
</body>
</html>
